<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自定义checkbox,radio样式</title>
    <style>
        .ck{width:20px;height:20px;display: none;}
        .ck+label{width:20px;height:20px;border:2px solid #f0f0f0;display: block;cursor:pointer;text-align: center;color:#8bbfff;}
        .ck:checked+label{border:2px solid #8bbfff;}
        .ck:checked+label::after{content: '\2714';}

        .rd{width:20px;height:20px;display: none;}
        .rd+label{width:20px;height:20px;border:1px solid #f0f0f0;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:5px;cursor:pointer;text-align: center;color:#8bbfff;}
        .rd:checked+label{border:1px solid #8bbfff;}
        .rd:checked+label::after{content:'\2714';}

        .ck2{width:20px;height:20px;display: none;}
        .ck2+label{background:url("bg.png") no-repeat -25px -32px;width:20px;height:20px;display: block;cursor:pointer;}
        .ck2:checked+label{background-position:-60px -32px;}

        .rd2{width:20px;height:20px;display: none;}
        .rd2+label{background: url("bg.png") no-repeat -24px -10px;width: 20px;height: 20px;display: inline-block;vertical-align: middle;cursor: pointer;}
        .rd2:checked+label{background-position:-59px -10px; }
    </style>
</head>
<body>
    <h3>方法1：使用伪元素</h3>
    <input type="checkbox" id="ck1" class="ck"/>
    <label for="ck1" class="ck-label"></label>
    <input type="radio" id="rd1" class="rd" name="radio"/>
    <label for="rd1"></label>
    <input type="radio" id="rd2" class="rd" name="radio"/>
    <label for="rd2"></label>

    <h3>方法2：使用雪碧图</h3>
    <input type="checkbox" id="ck2" class="ck2"/>
    <label for="ck2"></label>
    <input type="radio"  id="rd3" class="rd2" name="rd"/>
    <label for="rd3"></label>
    <input type="radio"  id="rd4" class="rd2" name="rd"/>
    <label for="rd4"></label>
</body>
</html>